import React, { useState, useEffect } from 'react'
import SearchListView from '../SearchListView'
import api from '../../../api'
import { InfiniteScroll, DotLoading } from 'antd-mobile'
export default function SearchList(props) {
    //最多可以下拉刷新次数
    const [countReq, setcountReq] = useState(2)
    const [searchData, setSearchData] = useState([])
    const [hasMore, setHasMore] = useState(false)
    useEffect(() => {
        console.log(props.search)
        api.search({
            search: props.search
        }).then(res => {
            if (res.data.status === 200) {
                setSearchData(res.data.result.data);
                setHasMore(true)
            }
        }).catch(error => {
            console.log(error)
        })
    }, [props.search])
    async function loadMore() {
        await new Promise((resolve) => {
            setTimeout(() => {
                resolve()
            }, 2500);
        })

        let a = await api.search({
            search: props.search
        })
        if (a.data.result.hasMore && countReq > 0) {
            setcountReq(countReq - 1)
            setSearchData([ ...searchData,...a.data.result.data]);
        } else {
            setHasMore(false)
        }
    }
    return (
        <div>
            {searchData.length > 0 ? <SearchListView search={searchData} /> : "等待数据加载"}
            {
                searchData.length > 0 &&
                <InfiniteScroll loadMore={loadMore} hasMore={hasMore} >
                    {hasMore ? <DotLoading /> : "没有更多了"}
                </InfiniteScroll>
            }
        </div>

    )
}
